<template>
  <div class="">
    <div text-center class="_head pt-106 pb-100">
      <h1 text-44>专业支付解决方案</h1>
      <div mt-35 mb-122 w-801 class="text-#5F6368 line-height-29 m-auto text-20">
        熵付通提供安全、稳定、高效的支付服务，支持支付宝、微信支付等主流支付方式，为您的业务提供全方位的支付接入能力
      </div>
      <div class="btn-group">
        <el-button size="large" type="primary">立即接入</el-button>
        <el-button size="large" type="primary" color="transparent" class="second-btn" @click="contactVisible = true">
          联系销售
        </el-button>
      </div>
    </div>
    <core></core>
    <serviceTo></serviceTo>
    <api></api>
    <fundSecurity></fundSecurity>
    <contact v-model="contactVisible"></contact>
  </div>
</template>
<script setup lang="ts">
import serviceTo from './serviceTo.vue';
import api from './api.vue';
import fundSecurity from './fundSecurity.vue';
import core from './core.vue';
import contact from '@/components/contact/index.vue'
import { ref } from 'vue';
const contactVisible = ref(false)
</script>
<style lang="scss" scoped>
._head{
  background: linear-gradient(106deg, #F8FBFF 0%, #E6F0FF 99%);
  .btn-group {
    .el-button {
      width: 126px;
      height: 51px;
      font-size: 16px;
      border-radius: 6px;
    }
    .second-btn {
      color: #448bf5;
      border: 1px solid #448bf5;
      &:hover {
        background-color: #448bf5;
        color: #fff;
      }
    }
  }
}
</style>
